<template>
  <div>
    <el-row justify="center">
      <h1>销售统计</h1>
    </el-row>
    <div style="display: flex ;justify-content: space-evenly">
      <el-form-item label="开始日期" style="width: 250px">
        <el-date-picker
            v-model="param.startDate"
            type="date"
            placeholder="请选择结束日期"
            value-format="YYYY-MM-DD"
            size="large"
        />
      </el-form-item>
      <el-form-item label="结束日期" style="width: 250px">
        <el-date-picker
            v-model="param.endDate"
            type="date"
            placeholder="请选择结束日期"
            value-format="YYYY-MM-DD"
            size="large"
        />
      </el-form-item>
      <el-button @click="findByItem" type="primary">查询</el-button>
    </div>
    <div style="display: flex">
      <div id="A" style="width: 600px;height:400px;"></div>
      <div id="B" style="width: 600px;height:400px;"></div>
    </div>


  </div>
</template>
<script>
import * as echarts from 'echarts';
import axios from "axios"

export default {
  data() {
    return {
      A: [],
      B: [],
      param: {},
    }
  }, methods: {
    show() {
      var myChart = echarts.init(document.getElementById('A'));
      let optionA = {
        title: [
          {
            text: '销售类别统计',
            left: '48.7%',
            bottom: '0',
            textAlign: 'center',


          }
        ],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '销售段',
            type: 'pie',
            radius: '50%',
            data: this.A,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(optionA);

      let B = echarts.init(document.getElementById('B'));
      let optionB = {
        title: [
          {
            text: '销售产品统计',
            left: '48.7%',
            bottom: '0',
            textAlign: 'center',

          }
        ],
        tooltip: {
          trigger: 'item'
        },

        series: [
          {
            name: '销售段',
            type: 'pie',
            radius: '50%',
            data: this.B,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      B.setOption(optionB);

    },
    findByItem() {
      this.findA();
      this.findB();

    }, findA() {
      axios.get('/project/pie/findA', {params: this.param}).then(resp => {
        this.A = resp.data;
        this.show();

      })


    }, findB() {
      axios.get('/project/pie/findB', {params: this.param}).then(resp => {
        this.B = resp.data;
        this.show();

      })


    }


  }, mounted() {
    this.show();
  }, created() {
    this.findByItem();
  }
}
</script>

<style scoped>

</style>